<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取浏览器默认滚动条宽度</title>
</head>
<body>
<script>
  /** 原理:
    父元素如果存在滚动条
    子元素width:100%,这个宽度是不会覆盖父元素的滚动条宽度的
    意思是说如果父元素宽100px,滚动条宽度17px
    那么子元素设置为100%,子元素的宽度最终就为83px,而不是100px

    注:
      .clientWidth和.offsetWidth皆可获取到元素的可视宽度(这个宽度包括滚动条的宽度)
      子父元素不要设置边框，以免发生不测

    法二: 不用两个元素 一个元素即可 box.offsetWidth(包含滚动条宽度) - box.clientWidth(不会包含滚动条宽度)
  */

  function getBarWidth() {
    const outDiv = document.createElement('div');
    outDiv.style.width = '100px';
    outDiv.style.position = 'absolute';
    /*outDiv.style.top = '-9999px';*/
    outDiv.style.backgroundColor = 'black';
    outDiv.style.height = '100px';
    document.body.appendChild(outDiv);
    const outDivWidth = outDiv.clientWidth;
    console.log('outDivWidth:',outDivWidth);

    outDiv.style.overflow = 'scroll';

    const innerDiv = document.createElement('div');
    innerDiv.style.width = '100%';
    innerDiv.style.backgroundColor = 'pink';
    innerDiv.style.height = '100px';
    outDiv.appendChild(innerDiv);
    const innerDivWidth = innerDiv.clientWidth;
    console.log('innerDivWidth:',innerDivWidth);
    /*document.body.removeChild(outDiv);*/

    return outDivWidth - innerDivWidth;
  }

  console.log(getBarWidth()); // 17


  /**
    去掉上面代码中演示用的生产中并不需要的代码
    以上代码最终可以整理为:*/
  /*function getBarWidth() {
    const outDiv = document.createElement('div');
    outDiv.style.width = '100px';
    outDiv.style.position = 'absolute';
    outDiv.style.top = '-9999px';
    document.body.appendChild(outDiv);
    const outDivOffsetWidth = outDiv.offsetWidth;

    /!** 父元素确保滚动条存在*!/
    outDiv.style.overflow = 'scroll';

    const innerDiv = document.createElement('div');
    innerDiv.style.width = '100%';
    outDiv.appendChild(innerDiv);
    const innerDivOffsetWidth = innerDiv.offsetWidth;
    document.body.removeChild(outDiv);

    return outDivOffsetWidth - innerDivOffsetWidth;
  }*/
</script>
</body>
</html>
